<template>
  <div class="tags">
    <el-tag v-for="(tag, index) in tags" :key="tag.name" :closable="tag.name !== 'home'" @close="tags.splice(index, 1)"
      :effect="route.name == tag.name ? 'dark' : 'plain'">
      {{ tag.label }}
    </el-tag>
  </div>

</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { ref } from 'vue';

const tags = ref([
  {
    path: '/home',
    name: 'home',
    label: '首页',
    icon: 'iconfont icon-home'
  }
]);

const route = useRoute();

</script>

<style lang="less" scoped>
.tags {
  margin: 20px 0 0 20px;
}
.el-tag {
  margin-right: 10px;
}
</style>